<div class="rating demos">
  <div class="ui relaxed divided items">
    <div class="item">
      <div class="content">
        <div class="ui large star rating" data-rating="2" data-max-rating="4"></div>
        <div class="header">
          <img src="/images/wireframe/square-image.png" class="ui avatar image">
          Choice #1
        </div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div class="ui large star rating" data-rating="3" data-max-rating="4"></div>
        <div class="header">
          <img src="/images/wireframe/square-image.png" class="ui avatar image">
          Choice #2
        </div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div class="ui large star rating" data-rating="4" data-max-rating="4"></div>
        <div class="header">
          <img src="/images/wireframe/square-image.png" class="ui avatar image">
          Choice #3
        </div>
      </div>
    </div>
  </div>

  <div class="ui divider"></div>

  <div class="ui relaxed divided items">
    <div class="item">
      <div class="ui tiny image">
        <img src="/images/wireframe/image.png">
      </div>
      <div class="content">
        <a class="header">Content Header</a>
        <div class="description">
          A description which may flow for several lines and give context to the content.
        </div>
        <div class="extra">
          11 <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="ui tiny image">
        <img src="/images/wireframe/image.png">
      </div>
      <div class="content">
        <a class="header">Content Header</a>
        <div class="description">
          A description which may flow for several lines and give context to the content.
        </div>
        <div class="extra">
          42 <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="ui tiny image">
        <img src="/images/wireframe/image.png">
      </div>
      <div class="content">
        <a class="header">Content Header</a>
        <div class="description">
          A description which may flow for several lines and give context to the content.
        </div>
        <div class="extra">
          16 <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="ui hidden divider"></div>

  <div class="ui horizontal divided relaxed list">
    <div class="item">
      <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui star rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui star rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui star rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui star rating" data-rating="0" data-max-rating="1"></div>
    </div>
    <div class="item">
      <div class="ui heart rating" data-rating="0" data-max-rating="1"></div>
    </div>
  </div>
</div>


<script type="text/javascript">
$(document)
  .ready(function() {
    $('.rating.demos .items .ui.rating')
      .rating()
    ;
    $('.rating.demos .list .ui.rating')
      .rating({
        clearable: true
      })
    ;
  })
;
</script>